﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <style type="text/css">
        .style1 {
            width: 50%;
        }
    </style>
    <script language="javascript" type="text/javascript">
        $(function () {
            //隔行显示奇数行背景颜色（#eeeeee），偶数行颜色（#999999）
            //$("#tb>tbody>tr:odd").css("background-color", "#eeeeee");
            //$("#tb>tbody>tr:even").css("background-color", "#999999");
            $("#tb>tbody>tr:odd").css("background-color", "#abf3e4");
            $("#tb>tbody>tr:even").css("background-color", "#46e7bf");

            //光棒效果(移入颜色为#cccccc  移出颜色为原本颜色)
            //$("#tb>tbody>tr").mouseover(function () {
            //    //1、获取原本tr行的颜色值
            //    var color = $(this).css("background-color");
            //    //2、设置自定义属性bg，并把原来的颜色赋值给它
            //    $(this).attr("bg", color);
            //    //3、将最新的颜色 赋值给当前tr行
            //    $(this).css("background-color", "#cccccc");
            //});
            //$("#tb>tbody>tr").mouseout(function () {
            //    //1、取出存在bg属性的颜色
            //    var color = $(this).attr("bg");
            //    //2、给当前tr赋值bg里面存的颜色
            //    $(this).css("background-color", color);
            //});

            //1、全选按钮添加点击事件
            $("#chkAll").click(function () {
                //2、获取当前全选按钮的checked属性状态
                var result = $(this).attr("checked");
                //3、获取下方所有单选框并将checked属性更改为2中获取的全选按钮的选中状态
                $("input[name='chkItem']").attr("checked", result);
            });
            //4、返选按钮添加点击事件
            $("#chkRev").click(function () {
                //5、遍历（each）下方所有的单选框
                $("input[name='chkItem']").each(function () {
                    //6、当被遍历时，获取当前单选框的checked属性更改为当前checked相反的（！）
                    $(this).attr(
                        "checked", !$(this).attr("checked")
                        );
                });
            });
        })
    </script>
    <!--<script language="javascript" type="text/javascript">
            a、当点击全选按钮时，首先获取该全选按钮的chencked属性值，然后找到下方所有的checkbox并将chencked属性均改为和全选按钮一致的属性值。
    b、当点击反选按钮时，找到下方所有的checkbox并将其checked属性值遍历均改为其原本相反的checked属性值。
            $(function () {
                $("select[id='Select1']").dblclick(function () {
                    $("select :selected").each(function () {
                        alert($(this).text());
                        $("select:[id='Select2']").append("<option>" + $(this).text() + "</option>");
                        $(this).remove();
                    });
                });
            })
        </script>-->
</head>
<body>
    <!--<div>
        <select id="Select1" multiple="multiple">
            <option>张三</option>
            <option>李四</option>
            <option>王五</option>
            <option>越六</option>
        </select>
    </div>
    <div>
        <select id="Select2" multiple="multiple">
            <option>钱七</option>
        </select>
    </div>-->
    <div style="background-color:Green"></div>
    <div>
        <input id="chkAll" type="checkbox" />全选
        <input id="chkRev" type="checkbox" />返选
    </div>
    <div>

        <table id="tb" class="style1">
            <tbody>
                <tr>
                    <td>
                        <input name="chkItem" type="checkbox" id="chkid" bg="red" />
                    </td>
                    <td>
                        ADC
                    </td>
                    <td>
                        金克斯
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="chkItem" type="checkbox" />
                    </td>
                    <td>
                        辅助
                    </td>
                    <td>
                        布隆
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="chkItem" type="checkbox" />
                    </td>
                    <td>
                        法师
                    </td>
                    <td>
                        安妮
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="chkItem" type="checkbox" />
                    </td>
                    <td>
                        上单
                    </td>
                    <td>
                        螃蟹
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="chkItem" type="checkbox" />
                    </td>
                    <td>
                        打野
                    </td>
                    <td>
                        盲僧
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
